
<html>
    <head>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
        <style>
            #bottle{
                width: 150px;
                height: 500px;
                margin: 0 auto;
                background: url(bottle.PNG) center no-repeat;
            }
            #bottle.burst{
                background-image: url(brokenBottle.PNG);
            }
            #state{
                color: red;
                text-align: center;
            }
            #bottle-health{
                width: 200px;
                height: 10px;
                border:2px solid #000;
                margin:0 auto 20px auto;
            }
            #hp{
                height: 10px;
                background: red;
            }
            #controls{
                width: 200px;
                margin: 0 auto;
            }
            #controls button{
                margin-left: 20px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div id="bottle" v-bind:class="{burst:showButton}"></div>
            <div id="state">{{state}}</div>
            <div id="bottle-health">
                <div id="hp" v-bind:style="{width:health+'%'}"></div>
            </div>
            <div id="controls">
                <button v-on:click="beat(10)" v-show="showButton">敲瓶子</button>
                <button v-on:click="restart">重新开始</button>
            </div>
        </div>
        <script>
            new Vue({
                el:'#app',
                data:{
                    health:100,
                    showButton:true,
                    state:""
                },
                methods:{
                    beat:function(number){
                        this.health-=number;
                        if(this.health<=0){
                            this.showButton = false
                            this.state="瓶子被敲碎了"
                        }
                    },
                    restart:function(){
                        this.health=100;
                        this.state=""
                        this.showButton =true
                    }
                }
            })
        </script>

    </body>
</html>